<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>气象站数据展示</title>
		<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
		<script type="text/javascript" src="js/angular.min.js"></script>
		<script type="text/javascript" src="js/qxz.js"></script> 
		
		<link rel="stylesheet" href="css/default_style_qixiang.css" />
		<link rel="stylesheet" href="css/index.css" />
		
	</head>
	<body ng-app="zth" ng-controller="qxzController" >  
		<div id="main"> 
			<div id="header">
				<div class="title-big cen ">
					实时气象观测数据
				</div>
				<div class="title-time cen ">
					{{time}}
				</div>
			</div>
			
			<div id="link">
				<div class="link-left ">
					<div class="link-left-p" style="">
						<div style="float:left;width:400px;height:36px;">
							<div class="link-left-title">连接状态：</div>
							<div id="conn1" class="link-left-wrap on">等待连接</div>
							<div id="conn2" class="link-left-wrap on"><font color="#00DCFF">{{start}}</font></div>
						</div>
						<div style="float:left;width：600px；height:36px;margin-left:60px;">
							<div class="link-left-title">数据获取时间：</div>
							<div id="get1" class="link-left-wrap"></div>
							<div id="get2" class="link-left-wrap"><font color="#00DCFF">{{qxzTh.time}}</font></div>
						</div>
					</div>
					
					<div class="link-left-p" style="">	
						<div style="float:left;width:400px;height:36px;">
							<div class="link-left-title">工作电压：</div>
							<div id="work1" class="link-left-wrap">无</div>
							<div id="work2" class="link-left-wrap"><font color="#00DCFF">{{qxzTh.dianya}}</font></div>
						</div>
					</div>
					
				</div>
				<div class="link-right">
					<div class="link-right-con">
					<input class="a-btn cen" id="full" type="button" style="display:inline" onclick="fullScreen()" value="全屏显示">
					<input class="a-btn cen" id="exit" type="button" style="display:none" onclick="exitScreen()" value="退出全屏"> 
					<input class="a-btn cen" id="start" type="button" style="display:inline" ng-click="start(selectedSite)" value="打开串口">
					<input class="a-btn cen" id="close" type="button" style="display:none" ng-click="close()" value="关闭串口">
					<select class="a-btn cen" style="width:160px" id="select" ng-model="selectedSite" ng-change="initTabelData()" ng-init="findPorts()">
			          	<option value=""  selected="selected">选择串口</option>
						<option ng-repeat="ports in list" value="{{ports}}" >{{ports}}</option>
					</select> 
					<div class="clear"></div>
					</div>
				</div>
				
			</div>
			
			<div id="wrap">
				<div class="wrap-list">
					<div class="wrap-list-one m1" >
						<div class="list-con">
							<img  style="float:left;width:100px;height:100px;margin-left:180px;" src="img/img_fengxiang.png">
							<span class="text-info">风向</span>
						</div>
						<div class="list-text">
							<ul class="list-text-title">
								<li>风向：</li>
							</ul>
							<ul class="list-text-wrap">
								<li>{{qxzTh.fengxiang}}</li>
							</ul>
							<div class="clear"></div>
						</div>
					</div>
					<div class="wrap-list-one m2">
						<div class="list-con">
							<img  style="float:left;width:100px;height:100px;margin-left:180px;" src="img/img_fengsu.png">
							<span class="text-info">风速</span>
						</div>
						<div class="list-text">
							<ul class="list-text-title">
								<li>风速：</li>
							</ul>
							<ul class="list-text-wrap">
								<li>{{qxzTh.fengsu}}</li>
							</ul>
							<div class="clear"></div>
						</div>
					</div>
					<div class="wrap-list-spec m3">
						<div class="list-con">
							<img  style="float:left;width:100px;height:100px;margin-left:180px;" src="img/img_yuliang.png">
							<span class="text-info">雨量</span>
						</div>
						<div class="list-text">
							<ul class="list-text-title">
								<li>分钟降水量：</li>
							</ul>
							<ul class="list-text-wrap">
								<li>{{qxzTh.yuliang}}</li>
							</ul>
							<div class="clear"></div>
						</div>
					</div>
					<div class="wrap-list-two m4" >
						<div class="list-con">
							<img  style="float:left;width:100px;height:100px;margin-left:180px;" src="img/img_wendu.png">
							<span class="text-info">温度</span>
						</div>
						<div class="list-text2">
							<p><span id="wd1" style="font-size:60px;">-/-</span><span id="wd2" style="font-size:60px;">{{qxzTh.wendu}}</span><span style="font-size: 48px;padding-left:10px;">℃</span></p>
						</div>
					</div>
					<div class="wrap-list-two m5" >
						<div class="list-con">
							<img  style="float:left;width:100px;height:100px;margin-left:180px;" src="img/img_shidu.png">
							<span class="text-info">湿度</span>
						</div>
						<div class="list-text2">
							<p><span id="sd1" style="font-size:60px;">-/-</span><span id="sd2" style="font-size:60px;">{{qxzTh.shidu}}</span><span style="font-size: 48px;padding-left:10px;">RH%</span></p>
						</div>
					</div>
					<div class="wrap-list-two m6" >
						<div class="list-con">
							<img  style="float:left;width:100px;height:100px;margin-left:180px;" src="img/img_qiya.png">
							<span class="text-info">气压</span>
						</div>
						<div class="list-text2">
							<p><span id="qy1" style="font-size:60px;">-/-</span><span id="qy2" style="font-size:60px;">{{qxzTh.qiya}}</span><span style="font-size: 48px;padding-left:10px;">hpa</span></p>
						</div>
					</div>
					
					<div class="clear"></div>
				</div>
				
			</div>
		</div>
	</body>
</html>
